<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查询统计</el-breadcrumb-item>
      <el-breadcrumb-item>指标文信息查询</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-row :gutter="30">
        <!-- <el-col :span="6">
          <el-input placeholder="输入单位名称模糊查询" v-model="queryInfo.mhDwmc" clearable> -->
<!--            <el-input placeholder="输入单位名称模糊查询" v-model="queryInfo.query" clearable @clear="getGoodsList">-->
            <!--            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>-->
          <!-- </el-input>
        </el-col>
        <el-col :span="6">
          <span>单位名称：</span>
          <el-select v-model="queryInfo.dwmc" clearable placeholder="请选择">
            <el-option v-for="(item,index) in companyOptions" :key="index"  :value="item.dwmc"></el-option>
          </el-select>
        </el-col> -->
        <el-col :span="6">
          <span>资金来源：</span>
          <el-select v-model="queryInfo.zjly" clearable placeholder="请选择">
            <el-option v-for="(item,index) in fundOptions" :key="index" :value="item"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" @click="findIndexText">查询指标文</el-button>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" @click="clearFilter">清除筛选</el-button>
        </el-col>
      </el-row>
      <h3>查询结果</h3>
      <!-- table表格区域 -->
      <el-table :data="indexTextlist" border stripe :header-cell-style="{background:'#eee',color:'#606266',fontSize: '14px'}">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="指标文号" prop="zbwh" ></el-table-column>
        <el-table-column label="单位名称" prop="dwmc" width="200px"></el-table-column>
        <el-table-column label="总金额(元)" prop="hjje" width="200px"></el-table-column>
        <el-table-column label="已使用金额(元)" prop="hjybje" width="200px"></el-table-column>
        <el-table-column label="剩余金额(元)" prop="syje" width="200px"></el-table-column>
        <el-table-column label="资金来源" prop="zjly" width="200px"></el-table-column>
        <el-table-column label="影像" width="150px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="查看影像材料" placement="top-start">
              <el-button type="primary" icon="el-icon-view" circle size="mini" @click="viewVideoData(scope.row.zbwh)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[2, 5, 10, 15, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </el-card>

  <!-- 影像材料对话框   -->
    <el-dialog :modal="false" title="指标文影像材料" :visible.sync="videoDialogVisible" width="50%">
      <el-tag type="success">单击图片查看大图</el-tag>
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item, index) in imgSrcList" :key="index">
          <img :src="item"  width="500px" height="500px" object-fit="contain" :preview="index">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="videoDialogVisible = false">确 定</el-button>
       </span>
    </el-dialog>

  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  data() {
    return {
      // 下拉框选中参数
      fundOptions: [],
      companyOptions: [],
      // 查询参数对象
      queryInfo: {
        // mhDwmc: '',
        // dwmc: '',
        // 单位账号
        gjjzh: '',
        zjly: '',
        pageNum: 1,
        pageSize: 10,
        onlyHaveBalance:false
      },
      // 指标文信息列表
      indexTextlist: [],
      // 总数据条数
      total: 0,
      // 图片路径列表
      imgSrcList: [],
      // 控制影像材料对话框显示隐藏
      videoDialogVisible: false,
      // 轮播数据绑定
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide,
  },
  created() {
    this.queryInfo.gjjzh = window.sessionStorage.getItem('gjjzh');
    this.getOptions();
    this.getIndexTextList();
  },
  mounted() {

  },
  methods: {
    async getOptions() {
      const { data: { data: res1} } = await this.$http.get('zbwmx/getAllZjly');
      this.fundOptions = res1;
      // const {data: { data: res2 }} = await this.$http.get('/zbwmx/getAllDwdjxx');
      // this.companyOptions = res2;
    },

    // 根据分页获取对应的商品列表
    async getIndexTextList() {
      const {data:meta,data:{data:res} } = await this.$http.post('/zbwmx/findZbwmx', this.queryInfo
      )
      if (meta.code !== 200) {
        return this.$message.error('获取信息失败！');
      }
      // if (res.total == 0) {
      //   return this.$message.error('没有符合查询条件的指标文信息！')
      // }
      this.$message.success('获取指标文信息成功！');
      this.indexTextlist = res.records;
      this.total = res.total;
      console.log(res.records)
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.getIndexTextList()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.getIndexTextList()
    },
    findIndexText() {
      this.getIndexTextList();
    },
    clearFilter() {
      // this.queryInfo.dwmc = '';
      // this.queryInfo.mhDwmc = '';
      this.queryInfo.zjly = '';
      this.getIndexTextList()
    },
    // 查看指标文对应的影像资料
   async viewVideoData(zbwh) {
      const { data:res } = await this.$http.get('/zbwmx/findZbwFile', {params: {
        channelCode: 'center',
        serviceCode:'btzbwlr',
        zbwh:zbwh
        }})
      if (res.code !== 200) return this.$message.error('获取影像资料失败！')
      this.videoDialogVisible = true
      this.imgSrcList = []
      // 将对应指标文的信息数组遍历处理（信息数组中元素是有不同批次的对象，对象中有具体文件的数组）
      for(let i = 0; i < res.data.length; i++) {
        //  文件数组遍历处理
        res.data[i].Files.forEach(item => {
          // 文件类型判断
          const symbolIndex = item.FileName.lastIndexOf('.')
          // 从.取到最后
          const imgType = item.FileName.substr(symbolIndex + 1)
          const imgSrc = `data:image/${imgType};base64,${item.FileBase64}`
          // 添加到对应指标文影像资料数组中
          this.imgSrcList.push(imgSrc)
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
.swiper-slide {
  display: flex;
  justify-content: center;
}

.el-dialog__wrapper {
  z-index: 0!important;
}

/deep/ .el-dialog__body {
  padding: 0 15px 0;
}

</style>
